<template>
    <view>
        <u-navbar title="子账号" title-bold>
            <template #right>
                <view><text class="icon right-bt" @click="addAccount">&#xe829;</text></view>
            </template>
        </u-navbar>
        <z-paging ref="paging" v-model="list" @query="upCallback">
            <!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" :bottombar="false"> -->
            <view class="mesc-content">
                <view class="account-wrap" v-for="(item, index) in list" :key="index">
                    <view>
                        <text>姓名：</text>
                        <text class="value">{{ item.nickname }}</text>
                    </view>
                    <view>
                        <text>手机号：</text>
                        <text class="value">{{ item.accountPhone }}</text>
                    </view>
                    <view>
                        <text>角色：</text>
                        <text class="value">{{ item.accountTypeName }}</text>
                    </view>
                    <u-line color="#cecece" />
                    <view class="btn-wrap">
                        <text class="icon o-font-color-error" @click="editAccountInfo(item)">&#xe605;</text>
                        <text class="icon o-font-color-8c" @click="delAccount(item.id)">&#xe696;</text>
                    </view>
                    <text class="create-time" v-if="item.lastLoginTime">上次登录：{{ item.lastLoginTime }}</text>
                    <text class="create-time" v-else>未活跃</text>
                </view>
            </view>
            <!-- </mescroll-body> -->
        </z-paging>
        <view class="copyright">
            <view class="safe-area-inset-bottom">
                <view>Copyright2020-2030</view>
                <view>浙江超凡云仓供应链管理有限公司</view>
            </view>
        </view>
        <u-popup v-model="show" mode="center" border-radius="10" z-index="99">
            <view class="popup-wrap">
                <view class="o-text-center o-font-bold">添加</view>
                <view>基础信息</view>
                <u-input v-model="name" placeholder="输入姓名(必填)" border class="input input-name"></u-input>
                <view class="o-flex o-flex-align-center input">
                    <u-input v-model="phone" type="number" maxlength="11" placeholder="输入手机号(必填)" border class="input-phone"></u-input>
                    <u-button type="p" size="mini" style="margin-left: 20rpx" :disabled="disabled" @click="sendCode(phone)">{{ btnText }}</u-button>
                </view>
                <u-input v-model="code" type="number" maxlength="6" placeholder="验证码" border class="input input-code"></u-input>
                <view>角色</view>
                <u-radio-group v-model="choose">
                    <block v-for="(item, idx) in rolse" :key="idx">
                        <u-radio :name="item.code" active-color="#fc4f75">{{ item.name }}</u-radio>
                    </block>
                </u-radio-group>
                <view class="popup-footer">
                    <u-button type="s" class="o-flex-1" @click="show = false">取消</u-button>
                    <u-button type="p" class="o-flex-1" @click="confirm">确定</u-button>
                </view>
            </view>
        </u-popup>
        <u-popup v-model="update" mode="center" border-radius="10" z-index="99">
            <view class="popup-wrap">
                <view class="o-text-center o-font-bold">修改信息</view>
                <view>基础信息</view>
                <u-input v-model="form.name" placeholder="输入姓名(必填)" border class="input input-name"></u-input>
                <view class="o-flex o-flex-align-center input">
                    <u-input v-model="form.phone" type="number" maxlength="11" placeholder="输入手机号(必填)" border class="input-phone"></u-input>
                    <u-button type="p" size="mini" style="margin-left: 20rpx" :disabled="disabled" @click="sendCode(form.phone)">{{ btnText }}</u-button>
                </view>
                <u-input v-model="form.code" type="number" maxlength="6" placeholder="验证码" border class="input input-code"></u-input>
                <view>角色</view>
                <u-radio-group v-model="form.choose">
                    <block v-for="(item, idx) in rolse" :key="idx">
                        <u-radio :name="item.code" active-color="#fc4f75">{{ item.name }}</u-radio>
                    </block>
                </u-radio-group>
                <view class="popup-footer">
                    <u-button type="s" class="o-flex-1" @click="update = false">取消</u-button>
                    <u-button type="p" class="o-flex-1" @click="updateConfirm">确定</u-button>
                </view>
            </view>
        </u-popup>
        <Verify @success="callback" mode="pop" captchaType="blockPuzzle" ref="verifyRef"></Verify>
        <u-modal v-model="showModal" :content="content" title="" @confirm="confirmDel" show-cancel-button></u-modal>
    </view>
</template>

<script lang="ts" setup>
import Verify from '@/components/verify/verify.vue';

import { onMounted, ref } from 'vue'

const content = ref('确认要删除该子账号吗?')
const show = ref(false)
const showModal = ref(false)
const name = ref('')
const phone = ref('')
const code = ref('')
const btnText = ref('发送验证码')
const disabled = ref(false)
const second = ref(60)
const interval = ref<NodeJS.Timer | undefined>(undefined)
const list = ref<Array<any>>([])
const rolse = ref<Array<any>>([])
const choose = ref(1)
const update = ref(false)
const form = ref<{ [key: string]: any }>({})
const targetPhone = ref('')
const id = ref('')
const paging = ref<any>(null)
const verifyRef = ref<any>(null)

onMounted(() => {
    uni.$u.$api.MerchantApi.queryAccountRoles().then((res: any) => {
        rolse.value = res
    })
})

function addAccount() {
    show.value = true
}
function upCallback() {
    uni.$u.$api.MerchantApi.queryAccount()
        .then((res: any) => {
            // list.value = res
            paging.value?.complete(res)
        })
        .catch(() => {
            paging.value?.complete(false)
        })
}
function editAccountInfo(item: any) {
    console.log(item)
    form.value = {
        id: item.id,
        name: item.nickname,
        phone: item.accountPhone,
        choose: item.accountType
    }
    update.value = true
}
function updateConfirm() {
    let params = {
        id: form.value.id,
        name: form.value.name,
        accountPhone: form.value.phone,
        verificationCode: form.value.code,
        accountType: form.value.choose
    }
    uni.$u.$api.MerchantApi.updateAccount(params).then((res: any) => {
        // 刷新页面
        if (res) {
            update.value = false
            uni.$u.toast('更新成功!')
            setTimeout(() => {
                paging.value?.reload()
            }, 1000)
        }
    })
}
function delAccount(tid: string) {
    id.value = tid
    showModal.value = true
}
function confirm() {
    let params = {
        name: name.value,
        accountPhone: phone.value,
        verificationCode: code.value,
        accountType: choose.value
    }
    uni.$u.$api.MerchantApi.newAccount(params).then((res: any) => {
        // 刷新页面
        if (res) {
            show.value = false
            uni.$u.toast('添加成功!')
            setTimeout(() => {
                paging.value?.reload()
            }, 1000)
        }
    })
}
function confirmDel() {
    uni.$u.$api.MerchantApi.delAccount({ id: id.value }).then((res: any) => {
        if (res) {
            uni.$u.toast('删除成功!')
            setTimeout(() => {
                paging.value?.reload()
            }, 1000)
        }
    })
}
function sendCode(mphone: string) {
    if (!mphone) return
    targetPhone.value = mphone
    verifyRef.value?.show()
}

function callback(params: any) {
    sendMessage(params.captchaVerification)
}

function sendMessage(captchaVerification: string) {
    let para = {
        accountPhone: targetPhone.value,
        verificationCodeType: 3,
        code: captchaVerification
    }
    uni.$u.$api.MerchantApi.sendCode(para).then((res: any) => {
        //触发倒计时（一般用于请求成功验证码后调用）
        uni.$u.toast('验证码发送成功,请注意查收!')
        // 禁用按钮
        disabled.value = true
        second.value = 60
        console.log('定时器:', interval.value)
        clearInterval(Number(interval.value))
        interval.value = setInterval(() => {
            if (second.value > 0) {
                second.value -= 1
                btnText.value = second.value + 'S'
            } else {
                disabled.value = false
                second.value = 0
                btnText.value = '获取验证码'
            }
        }, 1000)
    })
}
</script>

<style scoped lang="scss">
.right-bt {
    display: inline-block;
    margin-right: 20rpx;
    color: #007aff;
    padding: 20rpx;
}
.mesc-content {
    padding: 20rpx 30rpx;
    .account-wrap {
        background-color: white;
        padding: 20rpx;
        border-radius: 10rpx;
        line-height: 60rpx;
        position: relative;
        .btn-wrap {
            display: flex;
            justify-content: flex-end;
            & > text {
                padding: 20rpx;
            }
        }
        .create-time {
            position: absolute;
            right: 20rpx;
            top: 20rpx;
            color: #8c8c8c;
            font-size: 24rpx;
        }
        .value {
            color: #999999;
        }
    }
}

.copyright {
    position: fixed;
    bottom: 0rpx;
    width: 100%;
    padding-bottom: 20rpx;
    font-size: 24rpx;
    line-height: 50rpx;
    text-align: center;
    background-color: $uni-bg-color-grey;
}
.popup-wrap {
    width: 90vw;
    height: 50vh;
    padding: 20rpx;
    line-height: 60rpx;
    .input {
        margin-bottom: 20rpx;
    }
    .input-name {
        width: 300rpx;
    }
    .input-phone {
        width: 400rpx;
    }
    .input-code {
        width: 200rpx;
    }
    .popup-footer {
        position: absolute;
        bottom: 20rpx;
        display: flex;
        width: calc(100% - 40rpx);
        & > button {
            margin: 0 10rpx;
        }
    }
}
</style>
